<!DOCTYPE html>
<html>
  <head>
    <title>客户信息</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../js/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="../../css/custom.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
	
	<script type="text/javascript">
		$(function(){
			$("#dg").datagrid({
				url: "../../customer/list",
				
				toolbar:[
					{
					iconCls: "icon-add",
					text:"新增用户",
					handler: function(){
						$("#add").window("open");
						$("#type").hide();
						$("#id").hide();
						$("#type").val("add");
						$("#customerName").textbox('setValue','');
						$("#mobile").textbox('setValue','');
						$("#address").textbox('setValue','');
						$("#remark").textbox('setValue','');
					}},'-',
					{
					iconCls: 'icon-remove',
					text:"删除用户",
					handler: function(){
						deleteCustomer();
					}},
					{text: '<span class="search" title="输入客户名称查询">客户名称：<input type="text" id="custName"></span>'},
					{text: '<span class="search" title="输入手机查询">手机：<input type="text" id="phone"></span>'},
					{text: '<span title="点击查询"><a id="query" href="#" class="button blue small">查询</a></span>'}
				],
				pagination: true,
				rownumbers: true,
				onDblClickRow: function(rowIndex,rowData) {
					edit(rowIndex,rowData);
				}
			});
			$("#query").click(function(){
				var customerName = $("#custName").val();
				var mobile = $("#phone").val();
				if(''==customerName && ''==mobile) {
					$.messager.alert('warning','请至少输入一个查询条件');
					return false;
				}
				
				$.ajax({
					type: "post",
					url: "../../customer/list",
					dataType: "json",
					data: {"customerName":customerName,"mobile":mobile},
					success: function(data) {
						if(null == data) {
							$.messager.alert('warning','查询出现异常');
						}
						$("#dg").datagrid("loadData",data);						
					}
				});
			});
		});
		
		function deleteCustomer() {
			var ids = '';
			var keys = $('#dg').datagrid('getChecked');
			$.each(keys, function(index, item){
				ids += item.id+",";
			}); 
			$.ajax({
				type: "post",
				url: "../../customer/delete",
				dataType: "text",
				data: ids,
				success: function(data) {
					if("0" == data) {
						$.messager.show({
							title: "tips",
							msg: "操作成功",
							timeout: 3000,
							showType: "slide"
						});
					}
					$("#dg").datagrid('reload');
				}
			});
		}
		
		function edit(rowIndex,rowData) {
			$("#add").window("open");
			$("#id").hide();
			$("#type").hide();
			$("#type").val("update");
			$("#id").val(rowData.id);
			$("#customerName").textbox('setValue',rowData.customerName);
			$("#mobile").textbox('setValue',rowData.mobile);
			$("#address").textbox('setValue',rowData.address);
			$("#remark").textbox('setValue',rowData.remark);
		}
		
		function clearForm(){
			$('#ff').form('clear');
		}
		
		function submitForm(){
			var type = $("#type").val();
			var url = "../../customer/add";
			if('update' == type) {
				url = "../../customer/update";
			}
			$('#ff').form('submit',{
				url:url,
				dataType: 'json',
				success: function(result) {
					if(result == '0') {
					$("#add").window("close");
					$.messager.show({
							title: "tips",
							msg: "操作成功",
							timeout: 3000,
							showType: "slide"
						});
					$("#dg").datagrid('reload');
					}
				},
				onSubmit:function(){
					return $(this).form('enableValidation').form('validate');
				}
			});
		}
		
		function formatId(value,row,index) {
			if(row.id != null) {
				return "2222";
			} else {
				return "111";
			}
		}
	</script>

  </head>
  
  <body>
	<table id="dg" class="easyui-datagrid" title="客户信息" style="width:100%;height:400px"
			data-options="singleSelect:false,checkOnSelect:true,collapsible:true,sortable:true">
			<thead>
				<tr>
					<th field="ck" checkbox="true"></th>
					<th data-options="field:'id',width:100" formatter="formatId">客户ID</th>
					<th data-options="field:'customerName',width:100">客户名称</th>
					<th data-options="field:'mobile',width:100">手机</th>
					<th data-options="field:'address',width:200">地址</th>
					<th data-options="field:'remark',width:200">备注</th>
					<th data-options="field:'createTime',width:200">创建时间</th>
					<th data-options="field:'lastModifyTime',width:200">最后更新时间</th>
				</tr>
			</thead>
	</table>
	
	<div id="add" closed="true" class="easyui-window" title="客户信息" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:600px;height:400px;padding:10px;">
		<input id="type">
		<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
			<input name="id" id="id">
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" id="customerName" name="customerName" style="width:90%" data-options="label:'客户名称',required:true">
			</div>
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" id="mobile" name="mobile" style="width:90%" data-options="label:'手机',required:true,validType:'mobile'">
			</div>
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" id="address" name="address" style="width:90%" data-options="label:'地址',required:true">
			</div>
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" id="remark" name="remark" style="width:90%;height:120px" data-options="label:'备注',multiline:true">
			</div>
		</form>
		<div style="text-align:center;padding:5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
		</div>
	</div>
	
  </body>
</html>
